<div class="showBox container" style="height:  100%;">
    <div class="swiper-container swiper-container-initialized swiper-container-horizontal" style="height:  100%;">

      <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-3420px, 0px, 0px);">
        <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="{{ post_list.count }}-1" style="margin-right: 30px;">
          Slide 2
        </div>


        {% for post in post_list %}
        <div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="{{ forloop.counter }}-1" style="margin-right: 30px;">
            <div class="content flex-column-middle">
                <div class="category">{{ post.category }}</div>
                <h2>{{ post.title }}</h2>
                <div class="read-more">
                  <a href="{{ post.get_absolute_url }}">
                    <i class="fa fa-arrow-right" aria-hidden="true"></i>
                    阅读全文
                  </a>
                </div>
            </div> 
        </div>
        {% endfor %}





        <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-prev" data-swiper-slide-index="0" style="margin-right: 30px;">
          Slide 1
        </div>
      </div>


    </div>                    
</div>

                <div class="anchor">
                    <!-- Add Pagination -->
                    <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
                      <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span>
                      <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 2"></span>
                      <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
                    </div>
                </div>
                <div class="navigator">
                    <!-- Add Arrows -->
                    <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"></div>
                    <div class="swiper-button-prev" tabindex="0" role="button"  aria-label="Previous slide"></div>
                    <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                </div> 
                <canvas id="fizz" width="1553" height="350" style="position: absolute;bottom: 0;"></canvas>
                <!-- 轮播图js -->
                <script>
                    var swiper = new Swiper('.swiper-container', {
                      slidesPerView: 1,
                      spaceBetween: 30,
                      loop: true,
                      pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                      },
                      navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                      },
                    });
                </script> 

                <script>
                  (function() {
                    this.Bubble = (function() {
                      class Bubble {
                        constructor(x, y, r, createdAt) {
                          this.x = x;
                          this.y = y;
                          this.r = r;
                          this.createdAt = createdAt;
                        }

                        velocity() {
                          return this.r / 20 * Bubble.MAX_V;
                        }

                        grow(now) {
                          if (!this.rising && this.r <= Bubble.MAX_R) {
                            return this.r += Bubble.GROWTH_RATE * (now - this.createdAt);
                          }
                        }

                        move(now) {
                          if (this.rising) {
                            return this.y -= (now - this.startedRisingAt) * this.velocity();
                          }
                        }

                        rise() {
                          if (!this.rising && this.r > 2) {
                            this.rising = Math.random() < 0.15 * (this.r / Bubble.MAX_R);
                            if (this.rising) {
                              return this.startedRisingAt = new Date().getTime();
                            }
                          }
                        }

                      };

                      Bubble.MAX_R = 20;

                      Bubble.MAX_V = 0.01;

                      Bubble.GROWTH_RATE = 0.00005;

                      return Bubble;

                    }).call(this);

                    this.RisingBubbles = (function() {
                      var rand, randInt;

                      class RisingBubbles {
                        constructor(id, maxBubbles) {
                          var elem, i, j, ref;
                          this.maxBubbles = maxBubbles;
                          this.canvas = document.getElementById(id);
                          elem = $('#' + id);
                          elem.click(() => {
                            var b, j, len, ref, results, ts;
                            ts = new Date().getTime();
                            ref = this.bubbles;
                            results = [];
                            for (j = 0, len = ref.length; j < len; j++) {
                              b = ref[j];
                              if (!b.rising) {
                                b.rising = true;
                                results.push(b.startedRisingAt = ts);
                              } else {
                                results.push(void 0);
                              }
                            }
                            return results;
                          });
                          this.canvas.width = this.canvas.clientWidth;
                          this.canvas.height = this.canvas.clientHeight;
                          this.ctx = this.canvas.getContext('2d');
                          this.ctx.fillStyle = '#FFFFFF';
                          this.bubbles = [];
                          this.lastFrame = new Date().getTime();
                          for (i = j = 1, ref = randInt(0, this.maxBubbles); 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
                            this.bubbles.push(new Bubble(randInt(0, this.canvas.width), randInt(0, this.canvas.height), rand(0, Bubble.MAX_R), new Date().getTime()));
                          }
                        }

                        draw() {
                          return this.run(new Date().getTime());
                        }

                        run(now) {
                          var bubble, j, len, ref;
                          this.update(now);
                          this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
                          ref = this.bubbles;
                          for (j = 0, len = ref.length; j < len; j++) {
                            bubble = ref[j];
                            this.ctx.moveTo(bubble.x, bubble.y);
                            this.ctx.beginPath();
                            this.ctx.arc(bubble.x, bubble.y, bubble.r, 0, 2 * Math.PI);
                            this.ctx.fill();
                          }
                          return requestAnimationFrame(() => {
                            return this.run(new Date().getTime());
                          });
                        }

                        update(now) {
                          var b, i, j, k, len, ref, ref1, results;
                          ref = this.bubbles;
                          for (j = 0, len = ref.length; j < len; j++) {
                            b = ref[j];
                            b.grow(now);
                            b.rise();
                            b.move(now);
                          }
                          this.bubbles = (function() {
                            var k, len1, ref1, results;
                            ref1 = this.bubbles;
                            results = [];
                            for (k = 0, len1 = ref1.length; k < len1; k++) {
                              b = ref1[k];
                              if (b.y + b.r >= 0) {
                                results.push(b);
                              }
                            }
                            return results;
                          }).call(this);
                          if (this.maxBubbles - this.bubbles.length > 0) {
                            results = [];
                            for (i = k = 1, ref1 = randInt(0, this.maxBubbles - this.bubbles.length); 1 <= ref1 ? k <= ref1 : k >= ref1; i = 1 <= ref1 ? ++k : --k) {
                              results.push(this.bubbles.push(new Bubble(randInt(0, this.canvas.width), randInt(0, this.canvas.height), 1, new Date().getTime())));
                            }
                            return results;
                          }
                        }

                      };

                      randInt = function(min, max) {
                        return Math.floor(Math.random() * (max - min) + min);
                      };

                      rand = function(min, max) {
                        return Math.floor(Math.random() * (max - min) + min);
                      };

                      return RisingBubbles;

                    }).call(this);

                    $((function() {
                      var fizz;
                      fizz = new RisingBubbles('fizz', 50);
                      return fizz.draw();
                    }));

                  }).call(this);
                </script>